<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />

		<style>
			* {
				touch-action: none;
			}
			
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.mui-off-canvas-wrap {
				background-image: url(images/menu.png);
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-size: 100%;
			}
			
			.mui-off-canvas-left {
				background-color: transparent;
			}
			
			.mui-card {
				background-color: transparent;
				text-align: center;
				color: white;
			}
			
			.menu-cell {
				background-color: transparent;
			}
			
			.main-head {
				padding-top: 10px;
				background-image: url(images/mainheader.png);
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-size: 100%;
				height: 18vw;
				background-color: white;
				z-index: 1;
			}
			
			.mainframepage {
				/*margin-top: 9vw;*/
				margin-bottom: 0vw;
				border: none;
				background-color: white;
				height: 100%;
				/*width: 100%;*/
				width: 1px;
				min-width: 100%;
				*width: 100%;
				z-index: 999;
			}
			
			.mui-content {
				background-color: transparent;
				margin-top: 60px;
				padding-top: 0px !important;
			}
			
			.mui-card {
				/*display: block;*/
			}
			
			.tx {
				width: 100px;
				border-radius: 50%;
				height: 100px;
				background: #fff;
				margin: 0 auto;
				overflow: hidden;
			}
			
			#userheadimg {
				width: 100%;
				height: auto;
			}
			
			.mui-card-footer:before,
			.mui-card-header:after {
				background: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav main-head">
			<a class="mui-icon mui-action-menu  mui-pull-left" href="#offCanvasSide"><img src="images/head-icon.png" style="width:8vw ;" /></a>
			<!--<h1 class="mui-title">标题</h1>-->
		</header>
		<script src="libs/easymob-webim-sdk/EventListenerOptions.polyfill.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script src="libs/easymob-webim-sdk/jquery-1.11.1.js"></script>
		<script src="js/jquery-confirm.min.js"></script>
		<script>
			//取消浏览器的所有事件，使得active的样式在手机上正常生效
			document.addEventListener('touchstart', function() {
				return false;
			}, true);

			var menu = null,
				main = null;
			var showMenu = false;
			mui.init({
				swipeBack: false,
				statusBarBackground: '#f7f7f7',
				gestureConfig: {
					doubletap: true
				},
				subpages: [{
					id: 'pages/monitor.html',
					url: 'pages/monitor.html',
					styles: {
						top: '80px',
						bottom: 0,
						bounce: 'vertical'
					}
				}]
			});
			mui.plusReady(function() {
				//仅支持竖屏显示
				plus.screen.lockOrientation("portrait-primary");
                plus.navigator.setStatusBarStyle("light");
				main = plus.webview.currentWebview();
				main.addEventListener('maskClick', closeMenu);
				main.setStyle({zindex:2});
				//处理侧滑导航，为了避免和子页面初始化等竞争资源，延迟加载侧滑页面；
				setTimeout(function() {
					//alert(11);
					menu = mui.preload({
						id: 'menu.html',
						url: 'menu.html',
						styles: {
							left: 0,
							width: '70%',
							zindex: 1
						},
						show: {
							aniShow: 'none'
						}
					});
				}, 200);
			});
			var isInTransition = false;
			/**
			 * 显示侧滑菜单
			 */
			function openMenu() {
				if(isInTransition) {
					return;
				}
				if(!showMenu) {
					//侧滑菜单处于隐藏状态，则立即显示出来；
					isInTransition = true;
					menu.setStyle({
						mask: 'rgba(0,0,0,0)'
					}); //menu设置透明遮罩防止点击
					menu.show('none', 0, function() {
						//主窗体开始侧滑并显示遮罩
						main.setStyle({
							mask: 'rgba(0,0,0,0.4)',
							left: '70%',
							transition: {
								duration: 150
							}
						});
						mui.later(function() {
							isInTransition = false;
							menu.setStyle({
								mask: "none"
							}); //移除menu的mask
						}, 160);
						showMenu = true;
					});
				}
			};
			/**
			 * 关闭菜单
			 */
			function closeMenu() {
				if(isInTransition) {
					return;
				}
				if(showMenu) {
					//关闭遮罩；
					//主窗体开始侧滑；
					isInTransition = true;
					main.setStyle({
						mask: 'none',
						left: '0',
						transition: {
							duration: 200
						}
					},null,function(){
						isInTransition=false;
					});
					showMenu = false;
					//等动画结束后，隐藏菜单webview，节省资源；
					mui.later(function() {
						isInTransition = false;
						menu.hide();
					}, 300);
				}
			};
			//点击左上角侧滑图标，打开侧滑菜单；
			document.querySelector('.mui-action-menu').addEventListener('tap', function(e) {
				if(showMenu) {
					closeMenu();
				} else {
					openMenu();
				}
			});
			//主界面向右滑动，若菜单未显示，则显示菜单；否则不做任何操作
			window.addEventListener("swiperight", openMenu);
			//主界面向左滑动，若菜单已显示，则关闭菜单；否则，不做任何操作；
			window.addEventListener("swipeleft", closeMenu);
			//侧滑菜单触发关闭菜单命令
			window.addEventListener("menu:close", closeMenu);
			window.addEventListener("menu:open", openMenu);

			// H5 plus事件处理
			(function($, doc) {
				$.init();

				$.plusReady(function() {

					plus.navigator.setStatusBarBackground("#9966ff");
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if(backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};

					compatibleAdjust();

				});
			}(mui, document));
		</script>
	</body>

</html>
